<template>
  <div>
    <!-- <p>犬只管理</p> -->
    <el-form
      :model="numberValidateForm"
      ref="numberValidateForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="联系电话"
        prop="tel"
        :rules="[
          { required: true, message: '联系电话不能为空' },
          { type: 'number', message: '联系电话必须是数字' },
        ]"
      >
        <el-input
          class="tel"
          type="tel"
          v-model.number="numberValidateForm.tel"
          autocomplete="off"
        ></el-input>
        <el-button
          class="width"
          type="primary"
          @click="submitForm('numberValidateForm', numberValidateForm.tel)"
          >查询</el-button
        >
        <el-button @click="resetForm('numberValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="doginfo" style="width: 100%">
      <el-table-column label="正面照" width="150">
        <template slot-scope="scope">
          <el-avatar
            shape="square"
            :size="100"
            :src="scope.row.full_face_photo"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="犬名" width="100">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.dname }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="犬种" width="100">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.dtype }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="犬主" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.user.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="证件号" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.user.icd }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.tel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="登记时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.check_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag type="danger">
            {{ statustype(scope.row.status) }}
          </el-tag>
          <!-- <span style="margin-left: 10px">{{ scope.row.status }}</span> -->
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240">
        <template slot-scope="scope">
          <!-- 免疫审核通过 -->
          <div v-show="scope.row.status == 2">
            <div v-show="scope.row.immuneRegister == null">
              <el-button type="primary" @click="particular(scope.row.id)"
                >详情</el-button
              >
              <el-button type="primary" @click="register(scope.row.id)"
                >登记免疫</el-button
              >
            </div>
            <div v-show="scope.row.immuneRegister != null">
              <el-button type="primary" @click="particular(scope.row.id)"
                >详情</el-button
              >
              <el-button type="primary" @click="handleEdit(scope.row.id)"
                >修改信息</el-button
              >
            </div>
          </div>
          <!-- 免疫审核不通过 -->
          <div v-show="scope.row.status == 1">
            <el-button type="primary" @click="particular(scope.row.id)"
              >详情</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      numberValidateForm: {
        tel: "",
      },
      labelPosition: "left",
      doginfo: [],
      type: ["已登记", "未通过", "已通过"],
    };
  },
  methods: {
    //操作

    //进入详情页面
    particular(id) {
      sessionStorage.setItem("rid", id);

      this.$router.push({ path: "/hospital/verification/progress_bar" });
    },
    //进入免疫登记页面
    register(id) {
      sessionStorage.setItem("rid", id);

      this.$router.push({
        path: "/hospital/verification/immunization_registration",
      });
    },
    //进入修改登记信息页面
    handleEdit(id) {
      sessionStorage.setItem("rid", id);
      this.$router.push({
        path: "/hospital/verification/immunization_registration_amend",
      });
    },
    //获取全部犬只
    getdog() {
      this.$axios
        .get(
          "http://localhost:9091/immune/immune/status",
          //全部犬只
          { params: { status: 1 } }
        )
        .then((resp) => {
          if (resp.data.code == 200) {
            console.log(resp);
            this.doginfo = resp.data.data;
            //  console.log( this.doginfo)
            this.$message({
              type: "success",
              message: resp.data.message,
            });
          } else {
            this.$message({
              type: "info",
              message: resp.data.message,
            });
          }
        });
    },
    //判断状态
    statustype(status) {
      return this.type[status];
    },
    //根据电话查询
    submitForm(formName, tel) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          console.log(tel);

          this.$axios
            .get(
              "http://localhost:9091/immune/immune/tel",
              //get请求参数

              { params: { tel: tel } }
            )
            .then((resp) => {
              if (resp.data.code == 200) {
                // console.log(resp.data.message)
                this.doginfo = resp.data.data;
                //console.log( this.doginfo)
                this.$message({
                  type: "success",
                  message: resp.data.message,
                });
              } else {
                this.$message({
                  type: "info",
                  message: resp.data.message,
                });
              }

              // console.log(this.tableData)
            });
          //前端验证不通过不能提交
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.getdog();
  },
};
</script>
<style scoped>
.tel {
  width: 300px;
  margin-right: 50px;
}
.width {
  margin-right: 20px;
}
.f {
  float: left;
}
.div {
  width: 200px;
  height: 200px;
  border: 0px solid burlywood;
  float: left;
}
</style>
